<!--
  * @Description 导入文件预览 - 文件
  * @Author 莫发达
  * @create 2024-09-02 14:16 周一
-->
<script setup lang="ts">
import {computed} from "vue";
import {formatFileSize} from "@/utils/file-util.ts"
import {Close, SuccessFilled, RefreshRight} from "@element-plus/icons-vue";
import {isTextOverflow} from "@shared/utils/dom";
import {openTooltip, removePopper} from "@shared/base/open";
import BaseFileIcon from "@shared/base/base-file-icon/index.vue"; // 文件图标
import type {IUploadFile} from "../types.ts";

interface IProps {
  file: IUploadFile,
  index: number
}

const props = defineProps<IProps>();
const emits = defineEmits<{
  (e: 'delete'): void
  (e: 'retry'): void
  (e: 'preview'): void
}>();


/**
 * 文件大小
 */
const _fileSize = computed(() => {
  const {status, percentage, size} = props.file

  switch (status) {
    case "ready":
      return "等待上传";
    case 'uploading':
      // 上传中 显示上传进度
      return `${percentage}%`
    case 'reading':
      return `读取 ${percentage}%`;
    case 'success':
      return formatFileSize(size)
    case 'fail':
    default:
      return '--'
  }
})

/**
 * 鼠标进入
 * @param event
 * @param content
 * @param checkOverflow
 */
function onMouseenter(event: MouseEvent, content: string, checkOverflow = true) {
  if (!content) return;

  const target = event.target as HTMLDivElement;

  if (!checkOverflow) return openTooltip(target, content);

  const isOverflow = isTextOverflow(target);
  isOverflow && openTooltip(target, content);
}

/**
 * 重试
 */
function onRetry() {
  removePopper?.()
  emits('retry')
}
</script>

<template>
  <article
    class="h-10 flex gap-4 items-center bg-gray-50 px-2 rounded select-none text-xs"
  >
    <!--图标和文件-->
    <div class="flex items-center gap-2 flex-1 overflow-hidden">
      <BaseFileIcon
        :fileName="file.name"
        class="w-6 h-6 flex-none"
      />

      <a
        href="javascript:void(0)"
        class="text-text-secondary truncate hover:text-primary hover:underline cursor-pointer underline-offset-2"
        @click.prevent="$emit('preview')"
        @mouseenter="onMouseenter($event,file.name)"
      >
        <h4 class="truncate">{{ file.name }}</h4>
      </a>
    </div>

    <!--文件大小-->
    <span class="flex-0">{{ _fileSize }}</span>

    <!--上传处理-->
    <!--上传完成-->
    <span
      v-if="file.status === 'success'"
      class="flex-0 text-success flex items-center gap-1"
    >
      上传完成 <SuccessFilled class="w-4 h-4" />
    </span>
    <!--上传失败-->
    <button
      v-else-if="file.status === 'fail'"
      type="button"
      class="flex-0 text-error flex items-center gap-1"
      @mouseenter="onMouseenter($event,file.response?.message,false)"
      @click="onRetry"
    >
      上传失败
      <RefreshRight class="w-4 h-4" />
    </button>
    <!--上传中-->
    <el-progress
      v-else
      class="flex-0 !w-[60px] !top-0 !relative"
      :color="file.status === 'reading' ? 'orange' : ''"
      :percentage="file.percentage"
      :show-text="false"
    />

    <!--删除文件-->
    <button
      type="button"
      class="flex-0"
      aria-label="删除文件"
      @click="$emit('delete')"
    >
      <Close class="w-[14px] h-[14px] hover:text-error" />
    </button>
  </article>
</template>

<style scoped lang="less">

</style>
